<template>
  <div class="list_filter">
    <div class="list_filter_header">
      <div class="filter_name">筛选器名称</div>
      <div class="filter_edit">操作</div>
    </div>

    <div class="list_fiter_content">
      <el-scrollbar v-if="filterList.length > 0" height="calc( 100% - 148px )">
        <div
          class="filter_item"
          v-for="(item, index) in filterList"
          :key="index"
          @click="emits('openfilter', item)"
          :style="
            activefilter.task_code == item.task_code ? 'background-color: rgba(20, 198, 193, 0.3);' : ''
          "
        >
          <div class="name">{{ item.task_form.task_name }}</div>
          <div class="operation">
            <div @click.stop="emits('editfilter', item)">编辑</div>
            <div style="margin-left: 12px; color: #fb445f" @click.stop="emits('deletefilter', item)">
              删除
            </div>
          </div>
        </div>
      </el-scrollbar>

      <div v-else style="width: 100%; height: 100%; display: flex; justify-content: center">
        <el-empty :image-size="100" description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  filterList: Array,
  activefilter: Object,
})

const emits = defineEmits()
const editfilter = () => {}
</script>

<style lang="scss" scoped>
.list_filter {
  width: 100%;
  height: calc(100% - 56px);
}

.list_filter_header {
  height: 44px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #7f908f;
}
.filter_name {
  width: 160px;
  padding-left: 12px;
}
.filter_edit {
  flex: 1;
  padding-left: 12px;
}

.list_fiter_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;

  .filter_item {
    height: 36px;
    min-height: 36px;
    display: flex;
    cursor: pointer;

    .name {
      width: 160px;
      display: flex;
      font-size: 14px;
      font-weight: bold;
      color: #000;
      align-items: center;
      padding-left: 12px;
    }

    .operation {
      flex: 1;
      font-size: 12px;
      color: #7f908f;
      display: flex;
      align-items: center;
      padding-left: 12px;
    }
  }

  .filter_item:hover {
    background-color: rgba(20, 198, 193, 0.3);
  }
}
</style>